﻿@{
    ViewBag.Title = "Authonym_ADD";
    Layout = "~/Views/Shared/MyAccount.cshtml";
}
@using BI.CF.Model;
@{
    UserrsModel Umodel = Session["Umodel"] as UserrsModel;
}
<html>
<head>
    <title>实名认证</title>
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <link href="~/Scripts/webuploader.css" rel="stylesheet" />
    <link href="~/CES/bootstrap-theme.min.css" rel="stylesheet" />
    <script src="~/Scripts/webuploader.js"></script>
    <link href="~/Content/BootstrapSouce/css/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Content/BootstrapSouce/js/bootstrap.min.js"></script>
    <style>
        .upload-state-done:after {
            content: "\✔";
            font-family: FontAwesome;
            font-style: normal;
            font-weight: normal;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-size: 32px;
            position: absolute;
            bottom: 0;
            right: 4px;
            color: #4cae4c;
            z-index: 99;
        }
    </style>
    <script>
        //当鼠标离开时判断身份证格式是否合理
        $(function () {
            $("#IdCard").blur(function () {
                var RES = $("#IdCard").val();
                var n = /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/;
                if (!n.test(RES)) {
                    $("#span1").html("身份证号格式不正确")
                } else {
                    $("#span1").html("")
                }
            })
            var Authonym = $("#UserID").val();
            $.ajax({
                url: "/Authonym/Authonym_State",
                type: "post",
                data: {
                    id: Authonym
                },
                success: function (da) {
                    if (da == 0) {
                        $("#ta1").show();
                    } else {
                        var n = new Array();
                        n.push('<li style="font-size:14px;"><strong class="red">温馨提示：</strong>您的实名认证信息已通过审核</li>')
                        $("#div2").html(n.join(""));
                    }
                }
            })
        })
    </script>
</head>
<body>
    <table>
        <tr>
            <td>
                <div id="fileList">
                </div>
            </td>
        </tr>
    </table>
    <br />
    <table class="tc_table_cp" border="0" style="display:none" id="ta1">
        <tr>
            <td>证件照片：</td>
            <td>
                <div class="cp_img_jia" id="filePicker">选择文件</div>
            </td>
        </tr>
        <tr>
            <th>
                <input type="hidden" id="UserID" name="UserID" value="@Umodel.UserId" />
            </th>
        </tr>
        <tr>
            <td>
                证件号码：
            </td>
            <td>
                <input type="text" id="IdCard" name="IdCard" />
                <span id="span1" style="color:red"></span>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <button id="ctlBtn" class="btn btn-default">上传</button>
            </td>
        </tr>
    </table>
    <div>
        <p class="text-primary" id="div2"></p>
    </div>
</body>
</html>
<script type="text/javascript">
    var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";
    $(function () {
        var $ = jQuery,
        $list = $('#fileList'),
        // 优化retina, 在retina下这个值是2
        ratio = window.devicePixelRatio || 1,
        // 缩略图大小
        thumbnailWidth = 90 * ratio,
        thumbnailHeight = 90 * ratio,
        // Web Uploader实例
        uploader;
        uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: false,
            disableGlobalDnd: true,
            //// swf文件路径
            swf: applicationPath + '/Script/Uploader.swf',
            // 文件接收服务端。
            server: applicationPath + '/Authonym/UpLoadProcess',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',
            //只允许选择图片
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png'
            }
        });
        // 当有文件添加进来的时候
        uploader.on('fileQueued', function (file) {
            var $li = $(
                    '<div id="' + file.id + '" class="cp_img">' +
                        '<img>' +
                    '   <div class="cp_img_jian"></div>' + '</div>'
                    ),
                $img = $li.find('img');
            // $list为容器jQuery实例
            $list.append($li);
            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 100 x 100
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                $img.attr('src', src);
            }, thumbnailWidth, thumbnailHeight);
        });
        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress span');
            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<p class="progress"><span></span></p>')
                        .appendTo($li)
                        .find('span');
            }
            $percent.css('width', percentage * 100 + '%');
        });
        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on('uploadSuccess', function (file, response) {
            $('#' + file.id).addClass('upload-state-done');
        });
        // 文件上传失败，显示上传出错。
        uploader.on('uploadError', function (file) {
            var $li = $('#' + file.id),
                $error = $li.find('div.error');
            // 避免重复创建
            if (!$error.length) {
                $error = $('<div class="error"></div>').appendTo($li);
            }
            $error.text('上传失败');
        });
        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').remove();
        });
        //所有文件上传完毕
        uploader.on("uploadFinished", function () {
            //提交表单
        });
        //开始上传
        $("#ctlBtn").click(function () {
            uploader.option('formData', {
                UserID: $("#UserID").val(),
                IdCard: $("#IdCard").val()
            })
            uploader.upload();
        });
        //显示删除按钮
        $(".cp_img").live("mouseover", function () {
            $(this).children(".cp_img_jian").css('display', 'block');
        });
        //隐藏删除按钮
        $(".cp_img").live("mouseout", function () {
            $(this).children(".cp_img_jian").css('display', 'none');
        });
        //执行删除方法
        $list.on("click", ".cp_img_jian", function () {
            var Id = $(this).parent().attr("id");
            uploader.removeFile(uploader.getFile(Id, true));
            $(this).parent().remove();
        });
    });
</script>
